import React, { useContext } from 'react'
import { Card } from 'antd'
import { Item, ItemPanel } from 'gg-editor'
import start from '../../img/start.png'
import transformer from '../../img/transformer.png'
import validator from '../../img/validator.png'
import end from '../../img/end.png'
import httpDataSource from '../../img/httpDataSource.png'
import httpApply from '../../img/httpApply.png'
import javaLocalAppy from '../../img/javaLocalAppy.png'
import exclusiveGateway from '../../img/exclusiveGateway.png'
import FlowContext from '../../FlowContext'
import styles from './index.less'

const DataSourceTypeMap = {
  Http: {
    label: 'HTTP数据源',
    src: httpDataSource,
    nodeType: 'HttpDataSource',
  },
  undefined: {
    label: '开始',
    src: start,
    nodeType: 'Start',
  },
  None: {
    label: '开始',
    src: start,
    nodeType: 'Start',
  },
}

function FlowItemPanel({ data }) {
  const { dataSourceType, processCode } = data

  const { state } = useContext(FlowContext)

  return (
    <ItemPanel className={styles.itemPanel}>
      <Card bordered={false}>
        {state.hasStartNode
          ? null
          : (
          <Item
            type="node"
            size="78*78"
            shape="flow-circle"
            model={{
              color: '#FA8C16',
              label: DataSourceTypeMap[dataSourceType].label,
              nodeType: DataSourceTypeMap[dataSourceType].nodeType,
            }}
            src={start}
          />
            )}
        <Item
          type="node"
          size="86*54"
          shape="flow-rect"
          model={{
            color: '#1890FF',
            label: '转换器',
            nodeType: 'Transform',
            sourceMessageFormat: 'JSON',
            targetMessageFormat: 'JSON',
          }}
          src={transformer}
        />
        <Item
          type="node"
          size="88*54"
          shape="flow-rect"
          model={{
            color: '#00B277',
            label: '本地调用',
            nodeType: 'Invocation',
          }}
          src={javaLocalAppy}
        />

        <Item
          type="node"
          size="90*54"
          shape="flow-rect"
          model={{
            color: '#722ed1',
            label: 'HTTP调用',
            nodeType: 'HttpCall',
          }}
          src={httpApply}
        />

        <Item
          type="node"
          size="86*78"
          shape="flow-rhombus"
          model={{
            color: '#13C2C2',
            label: '校验器',
            nodeType: 'Validation',
            messageFormat: 'JSON',
          }}
          src={validator}
        />

        <Item
          type="node"
          size="90*88"
          shape="flow-rhombus"
          model={{
            color: '#faad14',
            label: '互斥网关',
            nodeType: 'ExclusiveGateway',
          }}
          src={exclusiveGateway}
        />

        {state.hasEndNode
          ? null
          : (
          <Item
            type="node"
            size="78*78"
            shape="flow-circle"
            model={{
              color: 'red',
              label: '结束',
              nodeType: 'End',
            }}
            src={end}
          />
            )}
      </Card>
    </ItemPanel>
  )
}

export default FlowItemPanel
